<template>
  <div ref="chartContainer" class="d3-chart-container"></div>
</template>

<script setup lang="ts">
import { ref, onMounted, watch, defineProps } from 'vue';
import { D3ChartUtils, ChartData, ChartOptions } from '@/utils/d3Charts';

interface Props {
  type: 'line' | 'bar' | 'pie';
  data: ChartData[];
  options?: ChartOptions;
}

const props = defineProps<Props>();
const chartContainer = ref<HTMLElement | null>(null);

const renderChart = () => {
  if (!chartContainer.value || !props.data.length) return;

  // Clear previous chart
  chartContainer.value.innerHTML = '';

  switch (props.type) {
    case 'line':
      D3ChartUtils.createLineChart(chartContainer.value, props.data, props.options);
      break;
    case 'bar':
      D3ChartUtils.createBarChart(chartContainer.value, props.data, props.options);
      break;
    case 'pie':
      D3ChartUtils.createPieChart(chartContainer.value, props.data, props.options);
      break;
  }
};

onMounted(() => {
  renderChart();
});

watch(
  () => [props.data, props.type, props.options],
  () => {
    renderChart();
  },
  { deep: true }
);
</script>

<style scoped>
.d3-chart-container {
  width: 100%;
  height: 100%;
  min-height: 300px;
}
</style>